<template>
  <div>
    <div style="display: flex;justify-content: space-around;">
      <el-row>
        <el-col>
          <div class="grid-content bg-purple-dark">
            <el-table
                :data="tableData"
                style="width: 100%">
              <el-table-column
                  label="日志日期"
                  prop="logDate"
                  width="360">
              </el-table-column>
              <el-table-column
                  label="日志内容"
                  prop="logContent"
                  width="360">
              </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <div class="block">
            <el-pagination
                :current-page=currentPage
                :page-size=pageSize
                :total=totalSize
                background
                layout="prev, pager, next"
                @current-change="currentPageFn">
            </el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>

    <div style="display: flex;justify-content: center">
      <el-row style="margin: 25px;width: 220px">
        <el-date-picker
            v-model="searchScope"
            placeholder="起始时间"
            style="margin-bottom: 10px"
            type="date"
            value-format="yyyy-MM-dd">
        </el-date-picker>
        <el-date-picker
            v-model="searchScope2"
            placeholder="结束时间"
            type="date"
            value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-row>
      <el-row style="margin-top: 50px">
        <el-button plain type="primary" @click="showPage">查询</el-button>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "LogView",
  data() {
    return {
      tableData: [],
      totalSize: 0,//总行数
      pageSize: 0,//当前显示数据页
      currentPage: 0,//当前页码
      searchScope: '',
      searchScope2: ''
    }
  },
  mounted() {
    this.showPage()
  },
  methods: {
    currentPageFn(currentPage) {
      this.currentPage = currentPage
      this.showPage()
    },
    showPage() {
      let s1 = this.searchScope
      if (this.searchScope === '' || this.searchScope == null) {
        s1 = "1900-01-01"
      }
      let s2 = this.searchScope2
      if (this.searchScope2 === '' || this.searchScope2 == null) {
        s2 = "2999-01-01"
      }
      let url = "api/log/showLogByPage/" + this.currentPage + "/" + s1 + "/" + s2
      this.axios.get(url).then(
          r => {
            this.tableData = r.data.list
            this.totalSize = r.data.total
            this.pageSize = r.data.pageSize
          }
      )
    }
  }
}
</script>

<style scoped>

</style>